<template>
  <div>
    <header>
      <button @click="handleClick" id="show-modal">+</button>
      <input type="text" v-model="keywords" id="search" placeholder="Search">
    </header>
  </div>
</template>

<script>
import { ref, watchEffect } from 'vue'
import { useStore } from 'vuex'
export default {
  setup() {
    let keywords = ref('')

    const { commit } = useStore()

    const handleClick = () => {
      commit('setIsOpen', true)
    }

    watchEffect(() => {
      commit('setKeywords', keywords)
    })

    return {
      handleClick,
      keywords
    }
  }
}
</script>

<style scoped>
button {
  background: dodgerblue;
  color: white;
  border-radius: 5px;
  border: none;
  font-size: 20px;
  outline: none;
}

input {
  font-size: 20px;
  border-radius: 5px;
  border: 1px solid silver;
  padding: 0 10px;
}

input::placeholder {
  color: lightgray;
}

header {
  background: lightgray;
  display: flex;
  padding: 10px;
  font-weight: bold;
  border-bottom: 1px solid silver;
  box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
}

#show-modal {
  padding: 0px 12px 5px;
  margin-right: 10px;
  font-size: 30px;
}

#search {
  flex-grow: 1;
}
</style>